  <template>
      <div class="edit-popup">
          <popup ref="popupRef" :title="popupTitle" :async="true" width="950px" :clickModalClose="true"
              @confirm="handleSubmit" @close="handleClose">
              <el-form ref="formRef" :model="formData" label-width="100px" :disabled="disabled" :inline="true">
                  <el-form-item label="请款单号" prop="paymentRequestNumber">
                      <el-input class="w-[300px]" v-model="formData.paymentRequestNumber" />
                  </el-form-item>
                  <el-form-item label="发票号" prop="invoiceNumber">
                      <el-input class="w-[300px]" v-model="formData.invoiceNumber" />
                  </el-form-item>
                  <el-form-item label="创建人" prop="creator">
                      <el-input class="w-[300px]" v-model="formData.creator" />
                  </el-form-item>
                  <el-form-item label="币别" prop="currency">
                      <el-input class="w-[300px]" v-model="formData.currency" />
                  </el-form-item>
                  <el-form-item label="代理折扣费" prop="agencyDiscountFee">
                      <el-input class="w-[300px]" v-model="formData.agencyDiscountFee" />
                  </el-form-item>
                  <el-form-item label="请款金额" prop="claimAmount">
                      <el-input class="w-[300px]" v-model="formData.claimAmount" />
                  </el-form-item>
                  <el-form-item label="官费" prop="officialFee">
                      <el-input class="w-[300px]" v-model="formData.officialFee" />
                  </el-form-item>
                  <el-form-item label="代理费" prop="agencyFee">
                      <el-input class="w-[300px]" v-model="formData.agencyFee" />
                  </el-form-item>
                  <el-form-item label="原始币别" prop="originalCurrency">
                      <el-input class="w-[300px]" v-model="formData.originalCurrency" />
                  </el-form-item>
                  <el-form-item label="原始请款总额" prop="totalOriginalRequest">
                      <el-input class="w-[300px]" v-model="formData.totalOriginalRequest" />
                  </el-form-item>
                  <el-form-item label="原始官费" prop="originalOfficialFee">
                      <el-input class="w-[300px]" v-model="formData.originalOfficialFee" />
                  </el-form-item>
                  <el-form-item label="原始代理费" prop="originalCommissionFee">
                      <el-input class="w-[300px]" v-model="formData.originalCommissionFee" />
                  </el-form-item>
                  <el-form-item label="到款金额" prop="amountReceived">
                      <el-input class="w-[300px]" v-model="formData.amountReceived" />
                  </el-form-item>
                  <el-form-item label="到账日期 " prop="receivedDate">
                      <el-date-picker class="flex-1 !flex" v-model="formData.receivedDate" type="datetime" clearable style="width: 300px"
                          value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择到账日期" />
                  </el-form-item>
                  <el-form-item label="最后办理时间" prop="finalProcessingTime">
                      <el-date-picker class="flex-1 !flex" v-model="formData.finalProcessingTime" type="datetime" style="width: 300px"
                          clearable value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择最后办理时间" />
                  </el-form-item>

              </el-form>
          </popup>
      </div>
  </template>
  <script lang="ts" setup>
  import type { FormInstance } from 'element-plus'
  import { withdrawContractDetail, withdrawContractAdd, withdrawContractEdit } from '@/api/withdrawContract'
  import Popup from '@/components/popup/index.vue'
  import feedback from '@/utils/feedback'
  import type { PropType } from 'vue'
  defineProps({
      dictData: {
          type: Object as PropType<Record<string, any[]>>,
          default: () => ({})
      }
  })
  const emit = defineEmits(['success', 'close'])
  const formRef = shallowRef<FormInstance>()
  const popupRef = shallowRef<InstanceType<typeof Popup>>()
  const mode = ref('add')
  const disabled = ref(false)
  const popupTitle = computed(() => {
      return mode.value == 'edit' ? '编辑请款信息' : '新增请款信息'
  })

  const formData = reactive({
      paymentRequestNumber: '',
      invoiceNumber: '',
      creator: '',
      currency: '',
      currencyid: '',
      agencyDiscountFee: '',
      claimAmount: '',
      officialFee: '',
      agencyFee: '',
      originalCurrency: '',
      totalOriginalRequest: '',
      originalOfficialFee: '',
      originalCommissionFee: '',
      amountReceived: '',
      receivedDate: '',
      finalProcessingTime: ''
  })


  const handleSubmit = async () => {
      await formRef.value?.validate()
      const data: any = { ...formData }
      console.log('data', data)
      mode.value == 'edit' ? await withdrawContractEdit(data) : await withdrawContractAdd(data)
      popupRef.value?.close()
      feedback.msgSuccess('操作成功')
      emit('success')
    const hande=async ()=>{
        console.log(11111)
    }
  }

  const open = (type = 'add') => {
      mode.value = type
      popupRef.value?.open()
  }

  const setFormData = async (data: Record<string, any>) => {
      for (const key in formData) {
          if (data[key] != null && data[key] != undefined) {
              //@ts-ignore
              formData[key] = data[key]
          }
      }
  }

  const getDetail = async (row: Record<string, any>) => {
      const data = await withdrawContractDetail({
          id: row.id
      })
      setFormData(data)
  }

  const handleClose = () => {
      emit('close')
  }

  defineExpose({
      open,
      setFormData,
      getDetail
  })
  </script>

  <style scoped>
  .remindFormEdit {
      flex-wrap: wrap;
      display: flex;
  }

  .remindFormEdit .el-form-item {
      width: 500px;

  }

  ::v-deep .el-collapse-item__header {
    padding-left: 54px;
    background-color: var(--el-bg-color-collapse);
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-collapse);
  }

  ::v-deep .el-collapse-item__wrap {
      padding-top: 40px;
  }
  </style>
